<template>
  <div class="form-horizontal">
  <div class="col-sm-8 flex" style="padding-right: 15px;">
    <criteria partial='criteria' @condition-changed = "sortCondition" v-ref:com>
      <div class="auto form-horizontal select-overspread" partial>
        <div class="row">

          <div class="col-sm-3 form-group form-input-group">
            <label for="" class="control-label">用户编号:</label>
            <input type="text" class="form-control" v-model="model.f_userinfo_id"
            condition="u.f_userinfo_id ='{}'" placeholder="用户编号"
            @keyup.enter="$parent.queryData()"/>
          </div>

          <div class="col-sm-3 form-group form-input-group">
            <label for="" class="control-label">用户姓名:</label>
            <input type="text" class="form-control" v-model="model.f_user_name"
             condition="u.f_user_name like '%{}%'" placeholder="用户姓名"
             @keyup.enter="$parent.queryData()"/>
          </div>


          <div class="col-sm-3 form-group form-input-group">
            <label for="" class="control-label">用户电话:</label>
            <input type="text" class="form-control" v-model="model.f_user_phone"
            condition="u.f_user_phone ='{}'" placeholder="用户电话"
            @keyup.enter="$parent.queryData()"/>
          </div>

          <div class="col-sm-3 form-group form-input-group">
            <label for="" class="control-label">用户地址:</label>
            <input type="text" class="form-control" v-model="model.f_address"
            condition="u.f_address like '%{}%'" placeholder="用户地址"
            @keyup.enter="$parent.queryData()"/>
          </div>
<!--
          <div class="col-sm-3 form-group form-input-group">
            <label for="" class="control-label">区:</label>
            <input type="text" class="form-control" v-model="model.f_area"
            condition="u.f_area like '%{}%'" placeholder="区"
            @keyup.enter="$parent.queryData()"/>
          </div> -->
          <div class="col-sm-3 form-group form-input-group">
            <label for="f_area" class="control-label ">区/县:</label>
            <v-select
              :value.sync="model.f_area"
              v-model="model.f_area"
              :options='$parent.areas'
              placeholder='区/县'
              condition="u.f_area like '%{}%'"
              @change='$parent.areaChanged'
              close-on-select>
            </v-select>
          </div>
          <div class="col-sm-3 form-group form-input-group">
            <label for="f_slice_area" class="control-label">片区/管理站:</label>
            <v-select :value.sync="model.f_slice_area"
              v-model="model.f_slice_area"
              :options='$parent.sliceArea'
              placeholder='片区/管理站'
              condition="u.f_slice_area like '%{}%'"
              close-on-select>
            </v-select>
          </div>

          <!-- <div class="col-sm-3 form-group form-input-group">
            <label for="" class="control-label">管理站:</label>
            <input type="text" class="form-control" v-model="model.f_area"
            condition="u.f_area like '%{}%'" placeholder="管理站"
            @keyup.enter="$parent.queryData()"/>
          </div> -->

          <div class="col-sm-3 form-group form-input-group">
            <label for="" class="control-label">小区:</label>
            <input type="text" class="form-control" v-model="model.f_residential_area"
            condition="u.f_residential_area like '%{}%'" placeholder="小区"
            @keyup.enter="$parent.queryData()"/>
          </div>




          <!-- <div class="col-sm-3 form-group form-input-group">
            <label for="" class="control-label">用户状态:</label>
            <v-select id="f_user_state"
            v-model="model.f_user_state"
            placeholder='请选择'
            condition="u.f_user_state ='{}'"
            :value.sync="model.f_user_state"
            :options='$parent.userState'
            close-on-select clear-button>
            </v-select>
          </div> -->
          <div class="col-sm-3 form-group form-input-group">
            <label for="" class="control-label">抄表员:</label>
              <v-select id="f_inputtor"
              v-model="model.f_inputtor"
              placeholder='请选择'
              condition="u.f_inputtor ='{}'"
              :value.sync="model.f_inputtor"
              :options='$parent.inputtor'
              close-on-select clear-button>
              </v-select>
          </div>

          <div class="col-sm-3 form-group form-input-group">
            <label for="" class="control-label">表编号:</label>
            <input type="text" class="form-control" v-model="model.f_user_id"
             condition="u.f_user_id ='{}'"
             placeholder="表编号"  @keyup.enter="$parent.queryData()"/>
          </div>

          <div class="col-sm-3 form-group form-input-group">
            <label for="" class="control-label">气表品牌:</label>
            <v-select id="f_user_type"
            v-model="model.f_meter_brand"
            placeholder='请选择'
            condition="u.f_meter_brand ='{}'"
            :value.sync="model.f_meter_brand"
            :options='$parent.meterbrands'
            close-on-select clear-button>
            </v-select>
          </div>


          <div class="col-sm-3 form-group form-input-group">
            <label for="startDate" class="control-label">开始日期:</label>
            <datepicker id="startDate" placeholder="开始日期" width='100%'
              v-model="model.startDate"
              :value.sync="model.startDate"
              :disabled-days-of-Week="[]"
              :format="'yyyy-MM-dd'"
              :show-reset-button="reset">
            </datepicker>
          </div>

          <div class="col-sm-3 form-group form-input-group">
            <label for="endDate" class="control-label">结束日期:</label>
            <datepicker id="endDate" placeholder="结束日期" width='100%'
              v-model="model.endDate"
              :value.sync="model.endDate"
              :disabled-days-of-Week="[]"
              :format="'yyyy-MM-dd'"
              :show-reset-button="reset">
            </datepicker>
          </div>

          <div class="col-sm-3 form-group form-input-group">
            <label for="" class="control-label">用户类型:</label>
            <v-select id="f_user_type"
            v-model="model.f_user_type"
            placeholder='请选择'
            condition="u.f_user_type ='{}'"
            :value.sync="model.f_user_type"
            :options='$parent.userType'
            close-on-select clear-button>
            </v-select>
          </div>


          <div class="col-sm-3 form-group form-input-group">
            <label for="" class="control-label">用气性质:</label>
            <v-select id="f_gasproperties"
            v-model="model.f_gasproperties"
            placeholder='请选择'
            condition="u.f_gasproperties ='{}'"
            :value.sync="model.f_gasproperties"
            :options='$parent.gasproperties'
            close-on-select clear-button>
            </v-select>
          </div>
          <div class="col-sm-3 form-group form-input-group">
            <label for="" class="control-label">营业网点:</label>
              <v-select id="f_outlets"
              v-model="model.f_outlets"
              placeholder='请选择'
              condition="t.f_outlets ='{}'"
              :value.sync="model.f_outlets"
              :options='$parent.outlets'
              @change='$parent.outletsChange'
              close-on-select clear-button>
              </v-select>
          </div>
          <div class="col-sm-3 form-group form-input-group">
            <label for="" class="control-label">操作员:</label>
            <v-select id="f_operator"
            v-model="model.f_operator"
            placeholder='请选择'
            condition="t.f_operator ='{}'"
            :value.sync="model.f_operator"
            :options='$parent.operator'
            close-on-select clear-button>
            </v-select>
          </div>




        </div>
        <div class="span" style = "float:right;margin-top:10px">
          <button class="btn btn-success " id = "queryData" v-on:click="$parent.queryData()">
            查&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;询
          </button>
          <button class="btn btn-success " v-on:click="$parent.queryshow = true"  >
            精&nbsp;确&nbsp;查&nbsp;询
          </button>
          <button class="btn btn-success "  style = "" @click="$parent.clean()">
            清&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空
          </button>
          <export-excel :data="$parent.$refs.query.inquiredata(true)"
          sqlurl="rs/logic/exportfile" :bean="$parent.reportBean()"></export-excel>
        </div>
        <div class="functional-select-wrapper display-container span" v-if = "$parent.singleCondition.length > 0">
          <div class="" v-for="row in $parent.singleCondition" >
            <p class="multiple-selected-item" >
              <span>{{row.content}}</span>
              <i v-on:click.stop.prevent="$parent.$parent.remove($index, row)">x</i>
            </p>
          </div>
        </div>
      </div>
    </criteria>
    <!--模态框-->
    <precise-query :show = "queryshow" :tabactive = 'tabactive'  v-on:toggle = "getparam" v-ref:precisequery></precise-query>
    <div class="auto">
      <ul class="nav nav-tabs">
        <li :class="{'active': tabactive.userinfo__tab}" @click="makeTabActive('userinfo__tab')"><a  href="#">档案信息</a></li>
        <li :class="{'active': tabactive.sellinggas__tab}" @click="makeTabActive('sellinggas__tab')"><a  href="#">收费信息</a></li>
        <li :class="{'active': tabactive.handplan__tab}" @click="makeTabActive('handplan__tab')"><a href="#">抄表信息</a></li>
        <!-- <li :class="{'active': tabactive.handsell__tab}" @click="makeTabActive('handsell__tab')"><a href="#" >抄收信息</a></li> -->
        <li :class="{'active': tabactive.record__tab}"  @click="makeTabActive('record__tab')"><a href="#">操作信息</a></li>
        <li :class="{'active': tabactive.changemeter__tab}" @click="makeTabActive('changemeter__tab')"><a href="#" >换表信息</a></li>
        <!-- <li :class="{'active': tabactive.infochange__tab}"  @click="makeTabActive('infochange__tab')"><a href="#">变更明细</a></li> -->
        <li :class="{'active': tabactive.transfer__tab}" @click="makeTabActive('transfer__tab')"><a href="#" >过户</a></li>
        <li :class="{'active': tabactive.correctrecord__tab}"  @click="makeTabActive('correctrecord__tab')"><a href="#">冲正</a></li>
        <li :class="{'active': tabactive.fillcard__tab}" @click="makeTabActive('fillcard__tab')"><a href="#" >补卡</a></li>
        <li :class="{'active': tabactive.fillgas__tab}"  @click="makeTabActive('fillgas__tab')"><a href="#">补气</a></li>
        <li :class="{'active': tabactive.othercharge__tab}"  @click="makeTabActive('othercharge__tab')"><a href="#">其他收费</a></li>
        <li :class="{'active': tabactive.recordcancel__tab}"  @click="makeTabActive('recordcancel__tab')"><a href="#">撤销记录</a></li>
      </ul>
    </div>
    <!-- 插入查询结果的组件 -->
    <div class="span">
      <query-result  :condition='condition' :tabactive='tabactive'  v-ref:query @default-search="defaultSearch()"></query-result>
    </div>
  </div>
  <div class="col-sm-4">
    <summarize  :condition='$refs.query.condition' :tabactive = 'tabactive'></summarize>
  </div>
  </div>
</template>
<script>
import AppData from '../../../../stores/AppData'
import co from 'co'
import * as Util from '../../../Util'
let setCon = function * (self) {
  self.setCondition()
}
let queryD = function * (com) {
  com.inquiredata()
}
let outletGen = function * (self) {
  let outlets = yield self.$resetpost('/rs/search', {source: 'tool.getChildrenOfResName($晋城市煤气开发利用中心$)', userid: ''}, {resolveMsg: null, rejectMsg: null})
  outlets.data.forEach((item, next) => {
    let temp = {}
    temp.label = item.name
    temp.value = item.name
    self.outlets.push(temp)
  })
  self.outlets = [{label: '全部', value: ''}, ...self.outlets]
}
let operatorGen = function * (self, val) {
  if (val[0] === '') {
    self.operator = [{label: '全部', value: ''}]
    self.$refs.com.model.f_operator[0] = ''
  } else {
    let operators = yield self.$resetpost('/rs/search', {source: `tool.getChildrenOfResName($${val}$)`, userid: ''}, {resolveMsg: null, rejectMsg: null})
    operators.data.forEach((item, next) => {
      let temp = {}
      temp.label = item.name
      temp.value = item.name
      self.operator.push(temp)
    })
    self.operator = [{label: '全部', value: ''}, ...self.operator]
  }
}
// 区
let getAreaGen = function * (self) {
  let getAreas = yield self.$resetpost('/rs/search', {source: 'tool.getChildrenOfResName($区$)', userid: ''}, {resolveMsg: null, rejectMsg: null})
  getAreas.data.forEach((item, next) => {
    let temp = {}
    temp.label = item.name
    temp.value = item.name
    self.areas.push(temp)
  })
  self.areas = [{label: '全部', value: ''}, ...self.areas]
}
// 片区
let getSliceGen = function * (self, val) {
  if (val[0] === '') {
    self.sliceArea = [{label: '全部', value: ''}]
    self.$refs.com.model.f_slice_area[0] = ''
  } else {
    let slices = yield self.$resetpost('/rs/search', {source: `tool.getChildrenOfResName($${val}$)`, userid: ''}, {resolveMsg: null, rejectMsg: null})
    self.sliceArea.splice(0)
    slices.data.forEach((item, next) => {
      let temp = {}
      temp.label = item.name
      temp.value = item.name
      self.sliceArea.push(temp)
    })
    self.sliceArea = [{label: '全部', value: ''}, ...self.sliceArea]
  }
}
export default {
  title: '综合查询',
  data () {
    return {
      queryshow: false,
      detshow: false,
      condition: '1=1',
      conditions: {},
      singleCondition: [],
      showConditions: {},
      outlets: [],
      operator: [],
      areas: [],
      sliceArea: [],
      replacejson: '',
      dateName: 't.f_createfile_date',
      commonname: 'userinfo',
      model: {
        f_user_name: '',
        f_userinfo_id: '',
        f_user_phone: '',
        f_residential_area: '',
        f_user_id: '',
        f_user_state: '',
        f_user_type: '',
        f_gasproperties: '',
        f_meter_classify: '',
        f_inputtor: '',
        startDate: '',
        endDate: '',
        f_address: '',
        f_area: '',
        f_meter_brand: '',
        f_operator: ''
      },
      tabactive: {
        userinfo__tab: true,
        sellinggas__tab: false,
        handplan__tab: false,
        handsell__tab: false,
        record__tab: false,
        changemeter__tab: false,
        infochange__tab: false,
        transfer__tab: false,
        correctrecord__tab: false,
        fillcard__tab: false,
        fillgas__tab: false,
        othercharge__tab: false,
        recordcancel__tab: false
      }
    }
  },
  ready () {
    // let getArea = getAreaFunction(this)
    co(getAreaGen(this)).then(() => { co(outletGen(this)) })
  },
  methods: {
    getArea () {
      let area = getAreaGen(this)
      co(area)
    },
    areaChanged (val) {
      if (this.model.f_area[0] !== val) {
        let slice = getSliceGen(this, val)
        co(slice)
      }
    },
    outletsChange (val) {
      this.operator = []
      let operator = operatorGen(this, val)
      return co(operator)
    },
    getOutlets () {
      let outlet = outletGen(this)
      return co(outlet)
    },
    defaultSearch () {
      this.$refs.com.model.startDate = Util.toStandardDateString()
      this.$refs.com.model.endDate = Util.toStandardDateString()
      this.queryData()
    },
    queryData () {
      let gen1 = setCon(this)
      let gen2 = queryD(this.$refs.query)
      co(gen1).then(() => co(gen2))
    },
    setCondition () {
      this.$refs.com.search()
    },
    // 整理条件
    sortCondition (val) {
      this.condition = ''
      if (this.conditions[this.commonname]) {
        this.condition = this.conditions[this.commonname] + ' and' + this.$refs.com.condition
      } else {
        this.condition = this.$refs.com.condition
      }
      if (this.showConditions[this.commonname]) {
        this.singleCondition = this.showConditions[this.commonname]
      } else {
        this.singleCondition = []
      }
      this.addDate()
    },
    // 切换标签
    makeTabActive (name) {
      this.commonname = name.split('_')[0]
      Object.assign(this.$data.tabactive, this.$options.data().tabactive)
      this.tabactive.userinfo__tab = false
      for (let key in this.tabactive) {
        if (name === key) {
          this.tabactive[key] = true
        }
      }
    },
    // 清零
    clean () {
      Object.assign(this.$refs.com.$data.model, this.$options.data().model)
      this.condition = ''
      this.singleCondition = []
      this.conditions = {}
      this.showConditions = {}
      this.$refs.precisequery.clearData()
      this.queryData()
    },
    remove (index, row) {
      this.singleCondition.splice(index, 1)
    },
    // 接受模态框数据
    getparam (param) {
      this.queryshow = false
      if (param) {
        this.conditions[this.commonname] = param.condition
        this.showConditions[this.commonname] = param.conditionArr
        this.queryData()
      }
    },
    // 返回 导出excel 所需要的地址
    reportExcel () {
      let url = ''
      if (this.commonname === 'userinfo') {
        url = 'rs/excel/report/singleTable_Public/用户查询导出Excel模板'
      } else if (this.commonname === 'sellinggas') {
        url = 'rs/excel/report/singleTable_Public/收费查询导出Excel模板'
      } else if (this.commonname === 'handplan') {
        url = 'rs/excel/report/singleTable_Public/抄表查询导出Excel模板'
      } else if (this.commonname === 'handsell') {
        url = 'rs/excel/report/handSell/抄收表查询导出Excel模板'
      } else if (this.commonname === 'record') {
        url = 'rs/excel/report/singleTable_Public/操作记录查询导出Excel模板'
      } else if (this.commonname === 'changemeter') {
        url = 'rs/excel/report/singleTable_Public/换表查询导出Excel模板'
      } else if (this.commonname === 'transfer') {
        url = 'rs/excel/report/singleTable_Public/过户查询导出Excel模板'
      } else if (this.commonname === 'correctrecord') {
        url = 'rs/excel/report/singleTable_Public/冲正查询导出Excel模板'
      } else if (this.commonname === 'fillcard') {
        url = 'rs/excel/report/singleTable_Public/补卡查询导出Excel模板'
      } else if (this.commonname === 'fillgas') {
        url = 'rs/excel/report/singleTable_Public/补气查询导出Excel模板'
      }
      return url
    },
    reportBean () {
      let bean = ''
      if (this.commonname === 'userinfo') {
        bean = '用户查询导出'
      } else if (this.commonname === 'sellinggas') {
        bean = '收费查询导出'
      } else if (this.commonname === 'handplan') {
        bean = '抄表查询导出'
      } else if (this.commonname === 'handsell') {
        bean = '抄收表查询导出'
      } else if (this.commonname === 'record') {
        bean = '操作记录查询导出'
      } else if (this.commonname === 'changemeter') {
        bean = '换表查询导出'
      } else if (this.commonname === 'transfer') {
        bean = '过户查询导出'
      } else if (this.commonname === 'correctrecord') {
        bean = '冲正查询导出'
      } else if (this.commonname === 'fillcard') {
        bean = '补卡查询导出'
      } else if (this.commonname === 'fillgas') {
        bean = '补气查询导出'
      }
      return bean
    },
    // 给条件添加开始日期和结束日期
    addDate () {
      let startDate = this.$refs.com.model.startDate + ' 00:00:00'
      let endDate = this.$refs.com.model.endDate + ' 23:59:59'
      if (this.$refs.com.model.startDate && this.$refs.com.model.startDate !== '') {
        this.addDateStart(startDate)
      }
      if (this.$refs.com.model.endDate && this.$refs.com.model.endDate !== '') {
        this.addDateEnd(endDate)
      }
    },
    addDateStart (startDate) {
      if (this.commonname === 'userinfo') {
        this.condition = this.condition + ' and t.f_createfile_date >= ' + '\'' + startDate + '\''
      } else if (this.commonname === 'sellinggas' || this.commonname === 'handsell') {
        this.condition = this.condition + ' and t.f_delivery_date >= ' + '\'' + startDate + '\''
      } else if (this.commonname === 'handplan') {
        this.condition = this.condition + ' and t.f_hand_date >= ' + '\'' + startDate + '\''
      } else if (this.commonname === 'correctrecord') {
        this.condition = this.condition + ' and t.f_correct_date >= ' + '\'' + startDate + '\''
      } else if (this.commonname === 'fillgas') {
        this.condition = this.condition + ' and t.f_fillgas_date >= ' + '\'' + startDate + '\''
      } else if (this.commonname === 'fillcard') {
        this.condition = this.condition + ' and t.f_fillcard_date >= ' + '\'' + startDate + '\''
      } else if (this.commonname === 'recordcancel') {
        this.condition = this.condition + ' and t.f_cancel_date >= ' + '\'' + startDate + '\''
      } else {
        this.condition = this.condition + ' and t.f_operate_date >= ' + '\'' + startDate + '\''
      }
    },
    addDateEnd (endDate) {
      if (this.commonname === 'userinfo') {
        this.condition = this.condition + ' and t.f_createfile_date <= ' + '\'' + endDate + '\''
      } else if (this.commonname === 'sellinggas' || this.commonname === 'handsell') {
        this.condition = this.condition + ' and t.f_delivery_date <= ' + '\'' + endDate + '\''
      } else if (this.commonname === 'handplan') {
        this.condition = this.condition + ' and t.f_hand_date <= ' + '\'' + endDate + '\''
      } else if (this.commonname === 'correctrecord') {
        this.condition = this.condition + ' and t.f_correct_date <= ' + '\'' + endDate + '\''
      } else if (this.commonname === 'fillgas') {
        this.condition = this.condition + ' and t.f_fillgas_date <= ' + '\'' + endDate + '\''
      } else if (this.commonname === 'fillcard') {
        this.condition = this.condition + ' and t.f_fillcard_date <= ' + '\'' + endDate + '\''
      } else if (this.commonname === 'recordcancel') {
        this.condition = this.condition + ' and t.f_cancel_date <= ' + '\'' + endDate + '\''
      } else {
        this.condition = this.condition + ' and t.f_operate_date <= ' + '\'' + endDate + '\''
      }
    }
  },
  watch: {
    'tabactive': {
      deep: true,
      handler (val) {
        this.queryData()
      }
    }
  },
  computed: {
    userState () {
      return [{label: '全部', value: ''}, ...AppData.getParam('用户状态')]
    },
    userType () {
      return [{label: '全部', value: ''}, ...AppData.getParam('用户类型')]
    },
    gasproperties () {
      return [{label: '全部', value: ''}, ...AppData.getParam('用气性质')]
    },
    meterclassify () {
      return [{label: '全部', value: ''}, ...AppData.getParam('气表分类')]
    },
    inputtor () {
      // console.log('哎i哎哎哎', [{label: '全部', value: ''}, ...AppData.getParam('抄表员')])
      return [{label: '全部', value: ''}, ...AppData.getParam('抄表员')]
    },
    meterbrands () {
      let arr = []
      AppData.getGasbrand().forEach((item) => {
        let temp = {}
        temp.label = item.label
        temp.value = item.value.f_meter_brand
        arr.push(temp)
      })
      return [{label: '全部', value: ''}, ...arr]
    }
    // operatores () {
    //   return [{label: '全部', value: ''}, ...AppData.getParam('操作员')]
    // }
    // f_outlets () {
    //   console.log('iiiiiiiiiiiiiiiii', AppData.getParam('营业网点'))
    //   return [{label: '全部', value: ''}, ...AppData.getParam('营业网点')]
    // }
  }
}
</script>
<style>
.border {
  border:0px solid black
}

/*将按键置于最右边*/
.button{
  float: right;
}

::-webkit-scrollbar
{
    width: 8px;
    height: 12px;
    background-color: #F5F5F5;
}
/*展示容器*/
.display-container{
  width:100%;
  min-height:35px;
  max-height:70px;
  box-sizing: border-box;
  position: relative;
  display: block;
  padding: 5px 10px 0px 10px;
  color: #555;
  background-color: #F5F5F5;
  border: 1px solid #93b2d3;
  border-radius: 4px;
  word-break: break-all;
}

/*单个选中的item*/
.functional-select-wrapper .multiple-selected-item{
 width: auto;
 height:auto;
 font-size: 10px;
 box-sizing: border-box;
 padding: 2px 15px 2px 6px;
 border: 1px solid #ccc;
 border-radius: 4px;
 display: inline-block;
 position: relative;
 float: left;
 background: #FFF;
}

.functional-select-wrapper .multiple-selected-item i{
 font-style: normal;
 position: absolute;
 right: 3px;
 top: 0px;
 cursor: pointer;
 color: #aaa;
}
.functional-select-wrapper .multiple-selected-item i:hover{
 font-weight: bolder;
 color: #000;
}
</style>
